@import "themes/var";

.el-popper.is-blue {
  padding: 5px;
  background: $color-primary;
  border-radius: 0;
  color: #fff;
  max-width: 200px;
  overflow-wrap: break-word;
  line-height: 16px;

  .el-popper__arrow {
    width: 8px;
    height: 8px;

    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      background: $color-primary;
    }
  }

  @each $placement, $adjacency in ('top': 'bottom', 'bottom': 'top', 'left': 'right', 'right': 'left') {
    &[data-popper-placement^='#{$placement}'] {
      .el-popper__arrow {
        #{$adjacency}: -4px;
        border-#{$placement}-color: $color-primary;
        border-#{$adjacency}-width: 0;

        &::after {
          border-#{$placement}-color: $color-primary;
        }
      }
    }
  }
}

.el-popper.is-blue.is-error {
  background: $color-error;
  max-width: 300px;

  .el-popper__arrow {
    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      background: $color-error;
    }
  }
}

.el-popper.is-blue.filter-dep-info {
  position: relative;
  padding: 6px;
  border-radius: 2px;
  background: $font-color;
  color: #000102;
  box-shadow: 0 0 6px -3px #000;
  max-width: 240px;

  .el-popper__arrow {
    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      background: $font-color;
    }
  }
}
